<!--
 * @Date: 2025-02-27 08:48:55
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2025-02-28 08:12:53
 * @FilePath: \fushun-gitee\components\smelting.vue
 * @Description: 冶炼方法弹窗
-->
<template>
  <div style="padding: 20px">
    <el-button type="warning" size="small" style="margin-bottom: 6px" @click="onReset">重置</el-button>
    <div class="flex">
      <div class="changeLeft">
        <div>
          <div class="block">电炉厂:</div>
          <div
            v-for="(item, index) in electricFurnace"
            :key="index"
            class="block-item block"
            draggable="true"
            @dragstart="onDragStart(item, index, $event, 'electricFurnace')"
          >
            {{ item }}
          </div>
        </div>
        <div style="margin: 20px 0">
          <div class="block">特冶厂:</div>
          <div
            v-for="(item, index) in teye"
            :key="index"
            class="block-item block"
            draggable="true"
            @dragstart="onDragStart(item, index, $event, 'teye')"
          >
            {{ item }}
          </div>
        </div>
        <div>
          <div class="block">铸造厂:</div>
          <div
            v-for="(item, index) in forging"
            :key="index"
            class="block-item block"
            draggable="true"
            @dragstart="onDragStart(item, index, $event, 'forging')"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="changeRight" @dragover.prevent="onDragOver" @drop="onDrop">{{ dropContent || "从左侧选择冶炼方法拖拽至此框内" }}</div>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      electricFurnace: ["电炉", "中频炉", "LF", "AOD", "VOD"],
      teye: ["真空感应炉", "电源重熔", "真空真耗"],
      forging: ["连铸", "模铸"],
      dropContent: null,
      souceItem: {
        name: "",
        index: "",
        parent: ""
      }
    };
  },
  methods: {
    onDragStart(item, key, e, parent) {
      this.souceItem = {
        name: item,
        index: key,
        parent: parent
      };
    },
    // 允许在目标区域上拖动
    onDragOver(event) {
      event.preventDefault();
    },
    onDrop(event) {
      // if (!Array.isArray(this.formMatter.smeltingProcess)) {
      //   this.formMatter.smeltingProcess = [];
      // }
      this.dropContent = this.dropContent
        ? this.dropContent + "+ " + this.souceItem.name
        : this.souceItem.name;
      // this.formMatter.smeltingProcess.push(this.souceItem.name);
      // 移除被拖拽的项目
      this.removeDraggedItem();
    },
    // 移除被拖拽的项目
    removeDraggedItem() {
      if (this.souceItem.parent != "") {
        this[this.souceItem.parent].splice(this.souceItem.index, 1);
        this.souceItem = {
          name: "",
          index: "",
          parent: ""
        };
      }
    },
    onReset() {
      this.electricFurnace = ["电炉", "中频炉", "LF", "AOD", "VOD"];
      this.teye = ["真空感应炉", "电源重熔", "真空真耗"];
      this.forging = ["连铸", "模铸"];
      this.dropContent = null;
    }
  }
};
</script>

<style>
.block {
  display: inline-block;
  color: white;
}
.block-item {
  cursor: pointer;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  color: #409eff;
  line-height: 30px;
  border: #409eff 1px solid;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 14px;
}
.changeLeft {
  width: 400px;
}
.changeRight {
  flex: 1;
  height: 140px;
  background-color: #405790;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
</style>
